<template>
  <div>
    <el-container>
      <el-header style="height: 5%; background-color: #fffbf0">
        <el-image
          style="margin-top: 0.5%; margin-left: 10%; float: left; width: 150px"
          :src="url"
        />
        <div style="margin-top: 2%; margin-right: 5%">
          <el-button type="primary" plain @click="toIndex">首页</el-button>
          <el-input
            v-model="queryObj.name"
            size="medium"
            style="width: 30%"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
          />
          <el-button type="primary" plain @click="search">馆藏检索</el-button>
          <el-button type="success" plain @click="toLogin">登录</el-button>
        </div>
      </el-header>
      <el-main>
        <div class="testdiv">
          <el-carousel
            type="card"
            align="center"
            height="300px"
            :interval="5000"
            arrow="always"
            indicator-position="outside"
          >
            <el-carousel-item v-for="(item, index) in imgList" :key="index">
              <img style="height: 100%; width: 100%" :src="item.idView" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div>
          <div
            style="
              width: 40%;
              height: 400px;
              float: left;
              background-color: white;
            "
          >
            <el-image :src="guoqi" />
          </div>
          <div
            style="
              width: 29%;
              height: 400px;
              float: left;
              margin: center;
              background-color: white;
              margin-right: 1%;
              margin-bottom: 1%;
            "
          >
            <el-tabs
              v-model="activeName"
              type="card"
              :stretch="true"
              @tab-click="handleClick"
            >
              <el-tab-pane label="讲座" name="first">
                <ul>
                  <li v-for="(item, index) in lectureTableData" :key="index">
                    <router-link
                      :to="{
                        path: '/acticleindex',
                        query: {
                          eventId: item.eventId,
                          acticleType: 'lecture',
                        },
                      }"
                    >
                      >><span>{{ item.eventName }}</span>
                    </router-link>
                    <el-divider />
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="展览" name="second">
                <ul>
                  <li v-for="(item, index) in showTableData" :key="index">
                    <router-link
                      :to="{
                        path: '/acticleindex',
                        query: { eventId: item.eventId, acticleType: 'show' },
                      }"
                    >
                      >><span>{{ item.eventName }}</span>
                    </router-link>
                    <el-divider />
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="活动" name="third">
                <ul>
                  <li v-for="(item, index) in activityTableData" :key="index">
                    <router-link
                      :to="{
                        path: '/acticleindex',
                        query: {
                          eventId: item.eventId,
                          acticleType: 'activity',
                        },
                      }"
                    >
                      >><span>{{ item.eventName }}</span>
                    </router-link>
                    <el-divider />
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div
            style="
              width: 30%;
              height: 400px;
              float: left;
              background-color: white;
            "
          >
            <el-table
              :span-method="arraySpanMethod"
              :data="noticeTableData"
              style="width: 100%; background-color: white"
            >
              <el-table-column prop="noticeName" label="公告通知">
                <template slot-scope="scope">
                  <router-link
                    :to="{
                      path: '/acticleindex',
                      query: {
                        noticeId: scope.row.noticeId,
                        acticleType: 'notice',
                      },
                    }"
                  >
                    <el-tag>
                      >><span>{{ scope.row.noticeName }}</span>
                    </el-tag>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <router-link
                    :to="{ path: '/more', query: { type: 'notice' } }"
                    >更多</router-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div>
          <div class="shici">
            <el-row
              type="flex"
              align="bottom"
              justify="center"
              style="opacity: 0.6; margin-top: 10%"
            >
              <el-col :span="16">
                <el-card
                  style="
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 12;
                    min-height: 200px;
                  "
                >
                  <div slot="header" class="clearfix">
                    <span>今日诗词:</span>
                    <el-tag
                      v-for="(item, index) in msg.matchTags"
                      :key="index"
                      type="success"
                    >
                      {{ item }}
                    </el-tag>
                    <el-button
                      style="float: right"
                      type="primary"
                      plain
                      @click="loadSentence"
                      >换一首</el-button
                    >
                  </div>
                  <div style="text-align: center">{{ msg.origin.title }}</div>
                  <div style="text-align: center">
                    {{ msg.origin.author }}&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{
                      msg.origin.dynasty
                    }}
                  </div>
                  <div
                    v-for="(item, index) in msg.origin.content"
                    :key="index"
                    style="text-align: center"
                  >
                    {{ item }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div
            style="
              width: 30%;
              height: 500px;
              float: left;
              background-color: white;
              text-align: center;
            "
          >
            <div style="height: 50px">
              <el-card class="demo" style="height: 41px" shadow="never">
                <div
                  class="text item"
                  style="
                    float: left;
                    color: #909399;
                    text-align: left;
                    font-size: 14px;
                    font-weight: bold;
                  "
                >
                  读者指南
                </div>
                <div
                  class="text item"
                  style="
                    float: right;
                    color: #909399;
                    text-align: left;
                    font-size: 14px;
                    font-weight: bold;
                  "
                >
                  <router-link :to="{ path: '/more', query: { type: 'guide' } }"
                    >更多</router-link
                  >
                </div>
              </el-card>
            </div>
            <div style="height: 450px" class="icons-container">
              <div
                v-for="(item, index) in guideTableData"
                :key="index"
                style="width: 33%; height: 33%; float: left"
              >
                <router-link
                  :to="{
                    path: '/acticleindex',
                    query: { guideId: item.guideId, acticleType: 'guide' },
                  }"
                >
                  <div v-html="item.icon" />
                  <span>{{ item.guideName }}</span>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="langduzhe">
            <el-row
              type="flex"
              align="bottom"
              justify="center"
              style="opacity: 0.6; margin-top: 5%"
            >
              <el-col :span="18">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>朗读者:</span>
                    <el-tag type="primary">
                      {{ ipAddress }}
                    </el-tag>
                    <el-button
                      style="float: right"
                      type="success"
                      plain
                      @click="findLSpeakerMsg"
                      >换一句</el-button
                    >
                  </div>
                  <div style="text-align: center">
                    {{ speaker.speakerTitle }}
                  </div>
                  <div style="text-align: center">
                    原作者：{{
                      speaker.speakerAuthor
                    }}&nbsp&nbsp&nbsp&nbsp朗读者：{{ speaker.speakerReader }}
                  </div>
                  <div style="text-align: center">
                    {{ speaker.speakerContent }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <div
            style="
              width: 29%;
              height: 400px;
              float: left;
              margin: center;
              background-color: white;
              margin-right: 1%;
            "
          >
            <el-table :data="donationTableData" style="width: 100%">
              <el-table-column prop="noticeName" label="图书捐赠">
                <template slot-scope="scope">
                  <router-link
                    :to="{
                      path: '/acticleindex',
                      query: {
                        noticeId: scope.row.noticeId,
                        acticleType: 'donation',
                      },
                    }"
                  >
                    <el-tag>
                      >><span>{{ scope.row.noticeName }}</span>
                    </el-tag>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <router-link
                    :to="{ path: '/more', query: { type: 'donation' } }"
                    >更多</router-link
                  >
                </template>
                <template slot-scope="scope">
                  <span>{{ scope.row.createDate }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div
            style="
              width: 30%;
              height: 400px;
              float: left;
              background-color: white;
            "
          >
            <el-table :data="dynamicTableData" style="width: 100%">
              <el-table-column prop="noticeName" label="云图动态">
                <template slot-scope="scope">
                  <router-link
                    :to="{
                      path: '/acticleindex',
                      query: {
                        noticeId: scope.row.noticeId,
                        acticleType: 'dynamic',
                      },
                    }"
                  >
                    <el-tag>
                      >><span>{{ scope.row.noticeName }}</span>
                    </el-tag>
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <router-link
                    :to="{ path: '/more', query: { type: 'dynamic' } }"
                    >更多</router-link
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-dialog title="检索结果" :visible.sync="dialogVisible" width="80%">
          <el-table
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="图书编码" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.bookId }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="图书名称" min-width="180px">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="图书作者" min-width="180px">
              <template slot-scope="scope">
                <span>{{ scope.row.author }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="出版社" min-width="180px">
              <template slot-scope="scope">
                <span>{{ scope.row.publish }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="语言" min-width="40px">
              <template slot-scope="scope">
                <span>{{ scope.row.language }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="发表时间" min-width="180px">
              <template slot-scope="scope">
                <span>{{ scope.row.pubdate }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="归属类别" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.lclassInfo.className }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="借阅状态" min-width="80px">
              <template slot-scope="scope">
                <span>{{ scope.row.state }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="图书价格" min-width="80px">
              <template slot-scope="scope">
                <span>{{ scope.row.price }}</span>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = !dialogVisible">取消</el-button>
            <el-button type="primary" @click="lendAction">借阅</el-button>
          </span>
        </el-dialog>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import IN from '@/api/index.js'
import svgIcons from './svg-icons'
export default {
  components: {},
  filters: {},
  data() {
    return {
      // msg: '美丽小陈，在线学习',
      imgList: [
        { id: 1, idView: require('../../assets/index/index04.png') },
        { id: 3, idView: require('../../assets/index/index01.png') },
        { id: 2, idView: require('../../assets/index/index02.png') },
        { id: 4, idView: require('../../assets/index/index03.png') }
      ],
      svgIcons,
      fits: [''],
      input: '',
      guoqi: require('../../assets/guoqi.jpg'),
      url: require('../../assets/1.png'),
      activeName: 'second',
      noticeTableData: [],
      dialogVisible: false,
      list: [],
      bookInfo: {
        name: '',
        author: '',
        publish: '',
        language: '',
        pubdate: '',
        lclassInfo: {
          className: ''
        },
        state: '',
        price: '',
        introduction: ''
      },
      donationTableData: [],
      dynamicTableData: [],
      lectureTableData: [],
      showTableData: [],
      activityTableData: [],
      guideTableData: [],
      jinrishici: null,
      msg: {
        matchTags: [],
        origin: {
          author: '',
          content: '',
          dynasty: '',
          title: '',
          translate: ''
        }
      },
      speaker: {},
      ipAddress: '',
      queryObj: {
        name: ''
      },
      username: null,
      icons: [
        {
          icon: '<i class="el-icon-platform-eleme" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-s-promotion" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-notebook-1" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-s-platform" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-bank-card" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-school" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-s-custom" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-folder-opened" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        },
        {
          icon: '<i class="el-icon-notebook-2" style="width:100%;height:40%;font-size: 50px;margin-top:10%"></i>'
        }
      ]
    };
  },
  computed: {
    currentUser() {
      return this.username = this.$store.state.account.user.description;
    }
  },
  created() {
    // this.getjinrishiciToken()
    this.jinrishici = require('jinrishici');
    //   this.jinrishici.load(result => {
    //     console.log("qwer",result);
    // });
    // 页面创建时执行的程序
    this.queryNotice();
    this.queryDonation();
    this.queryDynamic();
    this.queryLecture();
    this.queryShow();
    this.queryActivity();
    this.queryGuide();
    this.findLSpeakerMsg();
  },
  activated() { },
  mounted: function () { this.loadSentence() },
  destroyed() { },
  methods: {
    lendAction() {
      this.$router.push('/library/lend');
    },
    toIndex() {
      this.$router.push('/'); // 跳转到指定页面
    },
    toLogin() {
      this.$router.push('/login'); // 跳转到指定页面
    },
    search() {
      if (this.queryObj.name == '' || this.queryObj.name == null) {
        this.$message.warning('请输入图书名称进行检索！')
        return;
      }
      this.dialogVisible = true
      IN.lBookInfoList(this.queryObj).then(res => {
        this.list = res.data.resultBody.rows;
      })
    },
    findLSpeakerMsg() {
      IN.findLSpeakerMsg().then(res => {
        this.speaker = res.data.resultBody
      })
    },
    getjinrishiciToken() {
      IN.getJinrishiciToken().then(res => {
        window.localStorage.setItem('jinrishiciToken', res.data.data)
      })
    },
    loadSentence: function () {
      // IN.getJinrishici().then(res => {
      //   this.msg = result.data
      //   this.ipAddress = result.ipAddress
      //   console.log("test", result);
      // })
      this.jinrishici.load(result => {
        this.msg = result.data
        this.ipAddress = result.ipAddress
        console.log('test', result);
      }, err => {
        console.log('test');
      })
    },
    arraySpanMethod() {
      return {
        rowspan: 1,
        colspan: 2
      };
    },
    showNoticeMsg(row) {
      console.log(row)
    },
    showMsg() {
      alert('跳转到文章详情页面')
    },

    queryGuide() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        guideName: ''
      };
      IN.getIndexGuide(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.guideTableData = response.data.resultBody
        for (var i = 0; i < this.guideTableData.length; i++) {
          this.guideTableData[i].icon = this.icons[i].icon
        }
      })
    },

    queryLecture() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        eventType: 1
      };
      IN.getIndexEvents(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.lectureTableData = response.data.resultBody
      })
    },

    queryShow() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        eventType: 2
      };
      IN.getIndexEvents(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.showTableData = response.data.resultBody
      })
    },

    queryActivity() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        eventType: 3
      };
      IN.getIndexEvents(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        this.activityTableData = response.data.resultBody
      })
    },
    // 图书公告
    queryNotice() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 1
      };
      // this.$get('study/index/notice',{...queryObj}).then(response =>{
      //   console.log('陈宇荷的第一个方法获取的返回值：',response)
      //   // var data = response.data.resultBody;
      //   // this.noticeTableData = data
      //   //因为noticeTableData是全局变量，放在
      //   this.noticeTableData = response.data.resultBody
      // })
      IN.getIndexNotice(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        //   // var data = response.data.resultBody;
        //   // this.noticeTableData = data
        //   //因为noticeTableData是全局变量，放在
        this.noticeTableData = response.data.resultBody
      })
    },
    // 图书动态
    queryDynamic() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 2
      };
      IN.getIndexNotice(queryObj).then(response => {
        console.log('陈宇荷的第一个方法获取的返回值：', response);
        //   // var data = response.data.resultBody;
        //   // this.noticeTableData = data
        //   //因为noticeTableData是全局变量，放在
        this.dynamicTableData = response.data.resultBody
      })
    },
    // 图书捐赠
    queryDonation() {
      // queryObj 是我们传往后台的对象参数
      var queryObj = {
        noticeType: 3
      };
      IN.getIndexNotice(queryObj).then(response => {
        // console.log('陈宇荷的第一个方法获取的返回值：',response);
        //   // var data = response.data.resultBody;
        //   // this.noticeTableData = data
        //   //因为noticeTableData是全局变量，放在
        this.donationTableData = response.data.resultBody
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    view() {
      alert(this.msg);
    }
  }
};
</script>
<style lang='scss' scoped>
.shici {
  background: url("../../assets/shici.jpg") no-repeat;
  background-size: cover;
  width: 69%;
  height: 500px;
  float: left;
  margin: center;
  margin-right: 1%;
  margin-bottom: 1%;
}
.langduzhe {
  background: url("../../assets/youcaihua.jpg") no-repeat;
  background-size: 100% 400px;
  width: 40%;
  height: 400px;
  float: left;
  margin-bottom: 1%;
}
.el-header,
.el-footer {
  background-color: #fffbf0;
  color: #333;
  text-align: right;
  line-height: 80px;
}
.el-main {
  background-color: #fffbf0;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-card__body {
  padding: 10px;
}
</style>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
